<template>
  <div style="text-align: center;">
    <span style="font-size: 35px; color: black;">2023年度水利工程建设项目检查</span><br>
    <span style="font-size: 14px; margin-left: 170px;" id="tipspan">今年以来，共对3市4县（区、市）的4个项目开展了5次现场检查指导，发现问题10个，提出意见建议10条，1个项目完成整改，整改问题35个</span>
  </div>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 列表 -->
          <pro-table id="xmjcTable" class="xmjcTable"
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :param="state.param"
            :pagination="pagination"
          >
            <!-- 继承至 a-table 的默认插槽 -->
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <save :visible="state.visibleSave" @close="closeSave" :record="state.record"></save>
    <!-- 修改页面 -->
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit" ></edit>
  </page-layout>
</template>
<script>
import {reactive, ref, h} from 'vue';
import {page} from '@/api/module/xmjcha';
import save from '@/view/jianshe/xmjcha/save';
import edit from '@/view/jianshe/xmjcha/edit';

var state;
export default {
  components:  {
    save,
    edit,
  },
  mounted(){
    window.openLayerTips = this.openLayerTips
    window.doView = this.doView
  },
  methods: {
    openLayerTips(text, id){
      var layui = window.layui;
      var layer;
      layui.use(() => {
        layer = layui.layer;
      })
      layer.tips(text, "#"+ id, {tips: 1});
    },

    doView(record){
      record = record.replaceAll("\n", "\\n")
      var data = JSON.parse(record);
      state.visibleEdit = true;
      state.recordEdit = data;
    }
  },
  setup() {
    const tableRef = ref()

    /// 列配置
    const columns = [
      { title: "序号", width: 65,
        customRender: ({ text, record, index }) => {
          //生成序号
          return `${ index + 1 }`;
        }
      },
      { dataIndex: "xmmc", key: "xmmc", title: "项目名称", width: 300,
        customRender: ({ text, record, index }) => {
          //return '<a href="javascript:void(0)" style="color: blue;" onclick="doView(\''+ record.id +'\', \''+ record.dataztai +'\')">'+ text +'</a>';
          return h("a", {href: "javascript:void(0)", onclick: "doView('"+ JSON.stringify(record) +"')"}, text);
        }
      },
      { dataIndex: "shimc", key: "shimc", title: "市", width: 75},
      { dataIndex: "xianmc", key: "xianmc", title: "县", width: 100},
      { dataIndex: "xmflei", key: "xmflei", title: "项目类型", width: 165,},
      { dataIndex: "fxzywtqk", key: "fxzywtqk", title: "发现主要问题", ellipsis: true, customRender: ({ text, record, index }) => {
        let replaceText;
        if (null != text){
          replaceText = text.replaceAll("\n", "<br>");
        }
        return h('span', {onclick: "openLayerTips('"+ replaceText +"', 'fxzywtqk"+ index +"')", id: "fxzywtqk"+ index, style: "cursor: pointer;"}, text);
      }},
      { dataIndex: "gzyjjyqk", key: "gzyjjyqk", title: "工作意见建议", ellipsis: true, customRender: ({ text, record, index }) => {
        let replaceText;
        if (null != text){
          replaceText = text.replaceAll("\n", "<br>");
        }
        return h('span', {onclick: "openLayerTips('"+ replaceText +"', 'gzyjjyqk"+ index +"')", id: "gzyjjyqk"+ index, style: "cursor: pointer;"}, text);
      }},
      { dataIndex: "wcsxian", key: "wcsxian", title: "完成时限", width: 90},
      { dataIndex: "jcdwei", key: "jcdwei", title: "检查单位"},
      { dataIndex: "jcsjian", key: "jcsjian", title: "检查时间", width: 90},
      { dataIndex: "jcztai", key: "jcztai", title: "整改情况", width: 90, align:'center', customRender: ({ text, record, index }) => {
          let zgsj = "";
          if (null != record.zgsjian && "" != record.zgsjian) {
            let month = parseInt(record.zgsjian.month) +1; //
            let date = record.zgsjian.date;
            zgsj = month +"."+ date;
          }

          let result;
          let spanCSS;
          if ("0" === record.jcztai) {// 已整改
            result = '已整改';
            spanCSS = 'color: green;';
          } else if ("1" === record.jcztai && "1" === record.bzhu && "1" === record.xmfrcj) {// 已整改
            result = '已整改';
            spanCSS = 'color: green;';
          } else if ("1" === record.jcztai && "1" === record.bzhu) {// 已整改
            result = '待审核';
            spanCSS = 'color: blue;';
          } else if ("1" === record.jcztai) {// 已整改
            result = '整改中('+ zgsj +'更新)';
            spanCSS = 'color: blue;';
          } else if ("2" === record.jcztai) {// 未整改
            result = '未整改';
            spanCSS = 'color: red;';
          }
          return h('span', {style: spanCSS}, result);
      }},
      { dataIndex: "overtime", key: "overtime", title: "是否超时", width: 90, align:'center', customRender: ({ text, record, index }) => {
          let replaceText;
          let spanCSS;
          if (1 === record.overtime || '1' === record.overtime) {
            replaceText = '是';
            spanCSS = 'background-color: red; color: white;';
          }
          return h('p', {style: spanCSS}, replaceText);
        }},
    ]

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      return {
        data: response.data.record,
      }
    }

    /// 工具栏
    const toolbar = [
      { label: "添加检查反馈单", event: function () { state.visibleSave = true }},
    ];

    /// 分页参数
    const pagination = false;

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    state = reactive({
      param: {},

      visibleSave: false,
      visibleEdit: false,
      record: {},
      recordEdit: {},
    })

    const closeSave = function(){
      state.visibleSave = false
    }
    /// 关闭修改
    const closeEdit = function(){
      state.visibleEdit = false;
      tableRef.value.reload();
    }

    return {
      state,
      fetch,
      toolbar,
      tableRef,
      columns,
      pagination,

      closeSave,
      closeEdit,
    };
  }
}
</script>
<style>
  .xmjcTable > .ant-table-thead > tr > th,
  .xmjcTable > .ant-table-tbody > tr > td{
    padding: 10px 5px !important;
  }
</style>
